import WwwLevelItem from "@/app/[language]/avatar/components/WwwLevelItem";
import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import useGetAvatarWwwLevels from "@/app/[language]/avatar/query/useGetAvatarWwwLevels";
import { useAvatarStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { ListGroup } from "reactstrap";

export default observer(({ avatar: { avatarID } }: { avatar: GetAvatar }) => {
  const { tabPosition } = useAvatarStore();

  const { isFetched: isAvatarWwwLevelsLoaded, data: avatarWwwLevels } =
    useGetAvatarWwwLevels(tabPosition === 3 ? avatarID : undefined);

  return (
    <ListGroup>
      {isAvatarWwwLevelsLoaded ? (
        avatarWwwLevels.map(({ levelID, title, levelText, level, date }) => (
          <WwwLevelItem
            key={levelID}
            levelID={levelID}
            title={title}
            levelText={levelText}
            level={level}
            date={date}
          />
        ))
      ) : (
        <WwwLevelItem
          levelID=""
          title="Loading…"
          date={0}
          levelText=""
          level=""
        />
      )}
    </ListGroup>
  );
});